/*
 * @Author: SakumyZ
 * @Date: 2019-02-22 16:07:00
 * @Description:  完成一个具有样式的组件
 * @Last Modified by: SakumyZ
 * @Last Modified time: 2019-02-22 17:10:01
 */

import React from 'react';
import commentList from '@/css/commentList.scss';

console.log(commentList);

//! 方法一 定义行内样式，需要用{}括起来，里面放样式对象

//? class CommentList extends React.Component {
//?   render() {
//?     return <div style={{ color: 'red' }}>123</div>;
//?   }
//? }

//! 方法二 在外面定义好对象后，再放入style中，建议直接建立总的样式对象
//? const style = {
//?   CommentListCSS: {
//?     color: 'red',
//?     fontSize: '24px'
//?   }
//? };
//? class CommentList extends React.Component {
//?   render() {
//?     return <div style={style.CommentListCSS}>123</div>;
//?   }
//? }

//! 方法三，导入外部样式表，直接添加className
class CommentList extends React.Component {
  render() {
    return <div className={commentList.title}>123</div>;
  }
}

export default CommentList;
